Component簡介

如同其他的前端框架一樣，Blazor也有Component可以使用，這一篇我們來認識Blazor的Component吧!

Component一般翻譯成元件，一個元件就是一個使用介面，元件可大可小，可以大到一整個頁面是一個元件，小一點可以是一個表單，再小一點可以是一個按鈕。

元件包含了Html標籤，以及背後的處理邏輯。而這些Component在建立完成後最大的好處，就是可以重複使用，增加我們程式的維護性。Blazor的Component中，是由Html、C#以及Razor語法所組成的，因此在Blazor的世界中，我們叫元件為Razor Component。

1. 首先建立一個Blazor App，建立完後首先確定可以建置執行起來，看到預設畫面就OK囉!
2. 因為未來會在許多頁面共用這個按鈕，所以我們在Shared資料夾按滑鼠右鍵 > 加入 > Razor元件，命名為Mybtn.razor，命名元件名稱可用中文，英文的話則須為大寫開頭。
3. 這個按鈕我希望在Click之前是藍色，Click之後會變成綠色，因此我們先將相關的css寫好，在wwwroot/css底下新增一個btn.css：

.btn-blue {
    background-image: linear-gradient(to right, #1FA2FF 0%, #12D8FA 100%);
    color: #ffffff !important;
    padding: 10px 30px;
    margin: 10px;
    text-align: center;
    text-transform: uppercase;
    border-radius: 5px;
    transition: 0.5s;
}

.btn-green {
    background-image: linear-gradient(to right, #1D976C 0%, #93F9B9 100%);
    color: #ffffff !important;
    padding: 10px 30px;
    margin: 10px;
    text-align: center;
    text-transform: uppercase;
    border-radius: 5px;
    transition: 0.5s;
}

4. 在index.html中，將寫好的btn.css拖拉進head區塊
5. 在Mybtn元件加上按鈕連結並套用樣式，這樣我們就完成了這個元件

<div>
    <a class="btn-blue">Click Me !</a>
</div>

@code {

}

6. 現在我們準備在Index.razor中放入這個按鈕，只要輸入就可以使用這個元件了，注意標籤內的名稱，需與元件名稱相同。

7. 接著run起來就可以看到我們的藍色按鈕
   

8. 最後，我們要改一下Mybtn的程式碼，才有辦法讓按鈕在Click之後變綠色

<div>
    <a class="@btnStyle" @onclick="ToggleColor">Click Me !</a>
</div>

@code {
    
    string btnStyle = "btn-blue"; 
        
    void ToggleColor()
    {
        btnStyle = btnStyle == "btn-blue" ? "btn-green" : "btn-blue";
    }
}

從程式碼中可以看到a標籤的class與btnStyle綁定，Click之後執行ToggleColor方法，變色效果立即反應到按鈕上，這過程沒有寫到任何一行Javascript程式碼，全都是C# + Razor語法，而這也是當初Blazor框架開發的初衷。最後來看看成果吧。